import { Button, Input } from 'antd';
import type { ValidateMessages } from 'ym-design';
import { YmForm, YmSpace } from 'ym-design';

const { FormItem, useForm } = YmForm;

const myMessages: ValidateMessages = {
  required: '你需要一个 ${displayName}',
};

function DependenciesValidate() {
  const [form] = useForm();
  return (
    <div style={{ maxWidth: '600px' }}>
      <YmForm
        form={form}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFieldsChange={(changedfields, fieldDataList) => {
          console.log(
            '--Form--onFieldsChange--changedfields--fieldDataList--:',
            changedfields,
            fieldDataList,
          );
        }}
        onValuesChange={(changedValues, allValues) => {
          console.log(
            '--Form--onValuesChange--changedValues--allValues--:',
            changedValues,
            allValues,
          );
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish--values:', values);
        }}
        onFinishFailed={(errorInfo) => {
          console.log('--Form--onFinishFailed--errorInfo--:', errorInfo);
        }}
        validateMessages={myMessages}
      >
        <FormItem
          name="password"
          label="密码"
          validateFirst
          messageVariables={{ displayName: '密码' }}
          rules={[
            {
              required: true,
              whitespace: true,
            },
            {
              validator(rule, value) {
                if (value.length < 6) {
                  return Promise.reject('你的 ${displayName} 不能少于6位……');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <Input type="text" placeholder="请输入 password" />
        </FormItem>
        <FormItem dependencies={['password']} noStyle>
          {(formInstance) => {
            // console.log('--更新--password--:', formInstance?.getFieldValue('password'))
            return (
              <FormItem
                // initialValue="123"
                name="passwordConfirm"
                label="密码确认"
                messageVariables={{ displayName: '密码确认' }}
                rules={[
                  { required: true, whitespace: true },
                  // {
                  //   validator(rule, value, callback) {
                  //     if (value !== '123') {
                  //       callback('密码确认错误')
                  //     }
                  //   }
                  // }
                  ({ getFieldValue }) => ({
                    validator(rule, value) {
                      return new Promise((resolve, reject) => {
                        if (getFieldValue('password') !== value) {
                          reject('${displayName} not same as 密码');
                        } else {
                          resolve();
                        }
                      });
                    },
                  }),
                ]}
              >
                <Input type="text" placeholder="请输入 password confirm" />
              </FormItem>
            );
          }}
        </FormItem>

        {/* <FormItem
          // initialValue="123"
          dependencies={['password']}
          name="passwordConfirm"
          label="密码确认"
          messageVariables={{ displayName: '密码确认' }}
          rules={
            [
              { required: true, whitespace: true },
              // {
              //   validator(rule, value, callback) {
              //     if (value !== '123') {
              //       callback('密码确认错误')
              //     }
              //   }
              // }
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  return new Promise((resolve, reject) => {
                    if (getFieldValue('password') !== value) {
                      reject('${displayName} not same as 密码')
                    } else {
                      resolve()
                    }
                  })
                }
              })
            ]
          }
        >
          <Input type='text' placeholder='请输入 password confirm' />
        </FormItem> */}

        <FormItem wrapperCol={{ span: 16, offset: 8 }}>
          <YmSpace direction="horizontal">
            <Button htmlType="submit" type="primary">
              submit
            </Button>
            <Button htmlType="reset">reset</Button>
          </YmSpace>
        </FormItem>
      </YmForm>
    </div>
  );
}

export default DependenciesValidate;
